<template>
  <div class="query-container">
    <!-- 数据展示 -->
    <div class="result">

      <h2 style="margin:0px">箱号: {{ currentBoxId }}</h2>
      <h2 style="margin:0px">查询结果(总数: {{ records.length }})</h2>
      <table>
        <thead>
          <tr>
            <th>SN</th>
            <!-- <th>BOX_ID</th> -->
            <th style="width: 150px">创建时间</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="record in records"
            :key="record.SN"
          >
            <td>{{ record.SN }}</td>
            <!-- <td>{{ record.BOX_ID }}</td> -->
            <td>{{ record.CREATE_TIME }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import myAxios from '@/myAxios/myAxios';
import { showWarning } from '@/hooks/useMyMessageBox';

const route = useRoute();
const currentBoxId = ref(route.query.BOX_ID);
const records = ref([]);
// const loading = ref(false);
// const error = ref(false);
// const errorMessage = ref('');

// 格式化时间
// const formatDate = (timestamp) => {
//   const date = new Date(timestamp);
//   return date.toLocaleString();
// };

// 数据获取方法
const fetchData = async () => {
  console.log('currentBoxId.value :>> ', currentBoxId.value);
  let param = `${currentBoxId.value}`;
  myAxios.get('陈帅廷查询贴片线包装入库记录', param).then(res => {
    if (res instanceof Array) {
      if (res.length === 0) {
        showWarning('未找到该箱号入库数据！');
      }
      records.value = [...res];
    } else {
      showWarning('获取数据失败res!' + res);
    }
  }).catch(err => {
    showWarning('获取数据失败err!' + err);
  });

};


// 组件挂载时初始化数据
onMounted(() => {
  if (currentBoxId.value) {
    fetchData();
  } else {
    showWarning('请提供有效的BOX_ID参数');
    // error.value = true;
    // errorMessage.value = '未提供有效的BOX_ID参数';
  }
})
</script>

<style scoped>
.query-container {
  max-width: 800px;
  margin: 20px auto;
}

.loading,
.error {
  color: #6a1b9a;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f4f4f9;
}

tr:hover {
  background-color: #f9f9f9;
}
</style>